<template>
    <div class="menu-container">

        <div class="right">
            <div :id="`div${item.id}`" :style="{ background: item.color }" v-for="item in contentList" :key="item.id">
                <slot :name="item.name"></slot>
            </div>
        </div>
        <div class="left">
            <ul>
                <li v-for="item in menuList" :key="item.id" :class="{ 'selected': item.selected }"
                    @click="handleClick(item)">{{ item.title }}</li>
            </ul>
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref, toRefs } from 'vue';

const props = defineProps<{
    menuList: any[],
    contentList: any[]
}>()

const { menuList, contentList } = toRefs(props)

const handleClick = (val: any) => {
    menuList.value.forEach(item => {
        if (item.id == val.id)
            item.selected = true
        else
            item.selected = false
    })
    const rightDiv = document.getElementsByClassName('menu-container')[0]
    const dom = document.getElementById(`div${val.id}`)
    rightDiv?.scrollTo({ top: dom!.offsetTop - 120, })
}

onMounted(() => {
    const rightDiv = document.getElementsByClassName('menu-container')[0]
    rightDiv.addEventListener('scroll', () => {
        let height = 0
        menuList.value.forEach(item => {
            item.selected = false
            const dom1 = document.getElementById(`div${item.id}`)
            const dom2 = document.getElementById(`div${item.id - 1}`)
            if (dom2) {
                height += dom2!.clientHeight
                if (height - dom2!.clientHeight * 0.8 <= rightDiv.scrollTop && rightDiv.scrollTop < (height + dom1!.clientHeight - dom2!.clientHeight * 0.8)) {
                    item.selected = true
                    menuList.value[0].selected = false
                }
            } else {
                menuList.value[0].selected = true
            }
        })
    })
})
</script>

<style scoped lang="scss">
.menu-container {
    display: flex;
    height: 100%;
    overflow-y: scroll;

    .left {
        width: 20%;
        height: 100%;
        position: relative;

        ul {
            list-style: none;
            position: fixed;
            top: 30%;
            right: 2%;
            width: 10%;

            li:hover {
                cursor: pointer;
                background-color: aquamarine;
            }

            li {
                height: 40px;
                line-height: 40px;
                padding-left: 10px;
            }

            .selected {
                background-color: aquamarine;
                color: rgb(22, 93, 255);
            }
        }
    }

    .right {
        height: 100%;
        width: 100%;

        div {
            width: 100%;
        }
    }

}
</style>